<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>仓鼠の官网 - 一枚程序猿的技术空间</title>
    <meta name="description" content="仓鼠の官网，记录了整个软件学习生涯的学习历程和作品，包括部落仓鼠工具、仓鼠的博客等项目。">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#6366f1', // 主色调：靛蓝色
                        secondary: '#8b5cf6', // 辅助色：紫色
                        accent: '#ec4899', // 强调色：粉色
                        dark: '#1f2937', // 深色
                        light: '#f3f4f6', // 浅色
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .text-gradient {
                background-clip: text;
                -webkit-background-clip: text;
                color: transparent;
            }
            .bg-grid {
                background-size: 20px 20px;
                background-image: 
                    linear-gradient(to right, rgba(200,200,200,0.1) 1px, transparent 1px),
                    linear-gradient(to bottom, rgba(200,200,200,0.1) 1px, transparent 1px);
            }
            .animate-float {
                animation: float 6s ease-in-out infinite;
            }
            .animate-pulse-slow {
                animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
            }
            .hover-scale {
                transition: transform 0.3s ease;
            }
            .hover-scale:hover {
                transform: scale(1.03);
            }
        }
        
        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
            100% { transform: translateY(0px); }
        }
    </style>
</head>
<body class="font-inter bg-gray-50 text-dark overflow-x-hidden">
    <!-- 导航栏 -->
    <header id="navbar" class="fixed w-full z-50 transition-all duration-300 bg-white/80 backdrop-blur-md shadow-sm">
        <div class="container mx-auto px-4 py-3 flex items-center justify-between">
            <a href="#" class="flex items-center space-x-2">
                <div class="w-10 h-10 rounded-full bg-gradient-to-r from-primary to-secondary flex items-center justify-center">
                    <i class="fa-solid fa-hamster text-white text-xl"></i>
                </div>
                <span class="text-xl font-bold bg-gradient-to-r from-primary to-secondary text-gradient">仓鼠の官网</span>
            </a>
            
            <!-- 桌面导航 -->
            <nav class="hidden md:flex items-center space-x-8">
                <a href="#home" class="font-medium hover:text-primary transition-colors">首页</a>
                <a href="#projects" class="font-medium hover:text-primary transition-colors">项目</a>
                <a href="#skills" class="font-medium hover:text-primary transition-colors">技能</a>
                <a href="#about" class="font-medium hover:text-primary transition-colors">关于我</a>
                <a href="#contact" class="font-medium hover:text-primary transition-colors">联系方式</a>
            </nav>
            
            <!-- 移动端菜单按钮 -->
            <button id="menu-toggle" class="md:hidden text-dark hover:text-primary transition-colors">
                <i class="fa-solid fa-bars text-xl"></i>
            </button>
        </div>
        
        <!-- 移动端导航菜单 -->
        <div id="mobile-menu" class="md:hidden hidden bg-white shadow-lg absolute w-full">
            <div class="container mx-auto px-4 py-3 flex flex-col space-y-4">
                <a href="#home" class="font-medium hover:text-primary transition-colors py-2">首页</a>
                <a href="#projects" class="font-medium hover:text-primary transition-colors py-2">项目</a>
                <a href="#skills" class="font-medium hover:text-primary transition-colors py-2">技能</a>
                <a href="#about" class="font-medium hover:text-primary transition-colors py-2">关于我</a>
                <a href="#contact" class="font-medium hover:text-primary transition-colors py-2">联系方式</a>
            </div>
        </div>
    </header>

    <!-- 英雄区域 -->
    <section id="home" class="pt-32 pb-20 md:pt-40 md:pb-32 bg-gradient-to-br from-indigo-50 via-purple-50 to-pink-50 relative overflow-hidden">
        <div class="absolute inset-0 bg-grid opacity-50"></div>
        
        <!-- 装饰元素 -->
        <div class="absolute -top-20 -right-20 w-64 h-64 bg-primary/10 rounded-full blur-3xl"></div>
        <div class="absolute bottom-10 -left-20 w-80 h-80 bg-secondary/10 rounded-full blur-3xl"></div>
        
        <div class="container mx-auto px-4 relative">
            <div class="flex flex-col md:flex-row items-center">
                <div class="md:w-1/2 mb-10 md:mb-0">
                    <h1 class="text-[clamp(2.5rem,5vw,4rem)] font-bold leading-tight mb-4">
                        <span class="block">你好，我是</span>
                        <span class="bg-gradient-to-r from-primary to-accent text-gradient">仓鼠</span>
                    </h1>
                    <p class="text-lg md:text-xl text-gray-600 mb-8 max-w-xl">
                        一枚热爱技术的程序猿，专注于软件技术的学习与实践，致力于通过代码创造价值。
                    </p>
                    <div class="flex flex-wrap gap-4">
                        <a href="#projects" class="px-8 py-3 bg-gradient-to-r from-primary to-secondary text-white rounded-full font-medium shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-1">
                            查看我的项目
                        </a>
                        <a href="#contact" class="px-8 py-3 bg-white text-primary border border-primary rounded-full font-medium hover:bg-primary/5 transition-all transform hover:-translate-y-1">
                            联系我
                        </a>
                    </div>
                </div>
                <div class="md:w-1/2 flex justify-center">
                    <div class="relative">
                        <div class="w-64 h-64 md:w-80 md:h-80 rounded-full bg-gradient-to-br from-primary/20 to-accent/20 animate-pulse-slow"></div>
                        <div class="absolute inset-0 flex items-center justify-center">
                            <img src="https://picsum.photos/400/400" alt="仓鼠" class="w-56 h-56 md:w-72 md:h-72 rounded-full object-cover border-4 border-white shadow-xl animate-float">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 项目展示 -->
    <section id="projects" class="py-20 bg-white">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16">
                <h2 class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold mb-4">我的项目</h2>
                <p class="text-gray-600 max-w-2xl mx-auto">这里展示了我在软件开发过程中的一些作品，每一个项目都代表着一次技术的探索与成长。</p>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <!-- 项目1 -->
                <div class="bg-white rounded-2xl shadow-lg overflow-hidden hover-scale group">
                    <div class="h-48 bg-gray-100 relative overflow-hidden">
                        <img src="https://picsum.photos/600/400?random=1" alt="部落仓鼠工具" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
                        <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end">
                            <span class="ml-4 mb-4 px-3 py-1 bg-primary text-white text-sm font-medium rounded-full">重点项目</span>
                        </div>
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-bold mb-2">部落仓鼠工具</h3>
                        <p class="text-gray-600 mb-4">QQ微信群部落冲突机器人，提供部落冲突阵型库等功能，帮助玩家更好地体验游戏。</p>
                        <div class="flex flex-wrap gap-2 mb-4">
                            <span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs font-medium rounded">Python</span>
                            <span class="px-2 py-1 bg-green-100 text-green-800 text-xs font-medium rounded">Django</span>
                            <span class="px-2 py-1 bg-purple-100 text-purple-800 text-xs font-medium rounded">WebAPI</span>
                        </div>
                        <a href="https://yzycoc.com/qq" target="_blank" class="inline-flex items-center text-primary font-medium hover:underline">
                            访问网站 <i class="fa-solid fa-arrow-right ml-2"></i>
                        </a>
                    </div>
                </div>
                
                <!-- 项目2 -->
                <div class="bg-white rounded-2xl shadow-lg overflow-hidden hover-scale group">
                    <div class="h-48 bg-gray-100 relative overflow-hidden">
                        <img src="https://picsum.photos/600/400?random=2" alt="仓鼠的博客" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-bold mb-2">仓鼠的博客</h3>
                        <p class="text-gray-600 mb-4">记录我的技术学习历程、项目经验以及对编程的思考与感悟。</p>
                        <div class="flex flex-wrap gap-2 mb-4">
                            <span class="px-2 py-1 bg-orange-100 text-orange-800 text-xs font-medium rounded">Node.js</span>
                            <span class="px-2 py-1 bg-red-100 text-red-800 text-xs font-medium rounded">React</span>
                            <span class="px-2 py-1 bg-indigo-100 text-indigo-800 text-xs font-medium rounded">MongoDB</span>
                        </div>
                        <a href="https://yzycoc.com/blog" target="_blank" class="inline-flex items-center text-primary font-medium hover:underline">
                            访问博客 <i class="fa-solid fa-arrow-right ml-2"></i>
                        </a>
                    </div>
                </div>
                
                <!-- 项目3 -->
                <div class="bg-white rounded-2xl shadow-lg overflow-hidden hover-scale group">
                    <div class="h-48 bg-gray-100 relative overflow-hidden">
                        <img src="https://picsum.photos/600/400?random=3" alt="仓鼠API服务" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
                        <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-center justify-center">
                            <span class="px-4 py-2 bg-gray-800/80 text-white text-sm font-medium rounded-full">暂未开放</span>
                        </div>
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-bold mb-2">仓鼠API服务</h3>
                        <p class="text-gray-600 mb-4">提供多种实用的API接口，助力开发者快速实现功能集成。目前暂未开放分享。</p>
                        <div class="flex flex-wrap gap-2 mb-4">
                            <span class="px-2 py-1 bg-teal-100 text-teal-800 text-xs font-medium rounded">Go</span>
                            <span class="px-2 py-1 bg-yellow-100 text-yellow-800 text-xs font-medium rounded">Redis</span>
                            <span class="px-2 py-1 bg-pink-100 text-pink-800 text-xs font-medium rounded">Docker</span>
                        </div>
                        <button id="api-modal-btn" class="inline-flex items-center text-primary font-medium hover:underline">
                            了解更多 <i class="fa-solid fa-arrow-right ml-2"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 技能展示 -->
    <section id="skills" class="py-20 bg-gray-50">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16">
                <h2 class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold mb-4">我的技能</h2>
                <p class="text-gray-600 max-w-2xl mx-auto">作为一名全栈开发者，我掌握多种技术栈，不断学习和探索新的技术领域。</p>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
                <div>
                    <h3 class="text-xl font-bold mb-6 flex items-center">
                        <i class="fa-solid fa-code text-primary mr-3"></i> 编程语言
                    </h3>
                    <div class="space-y-4">
                        <div>
                            <div class="flex justify-between mb-1">
                                <span class="font-medium">Python</span>
                                <span>90%</span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-2.5">
                                <div class="bg-gradient-to-r from-primary to-secondary h-2.5 rounded-full" style="width: 90%"></div>
                            </div>
                        </div>
                        <div>
                            <div class="flex justify-between mb-1">
                                <span class="font-medium">JavaScript/TypeScript</span>
                                <span>85%</span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-2.5">
                                <div class="bg-gradient-to-r from-primary to-secondary h-2.5 rounded-full" style="width: 85%"></div>
                            </div>
                        </div>
                        <div>
                            <div class="flex justify-between mb-1">
                                <span class="font-medium">Go</span>
                                <span>75%</span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-2.5">
                                <div class="bg-gradient-to-r from-primary to-secondary h-2.5 rounded-full" style="width: 75%"></div>
                            </div>
                        </div>
                        <div>
                            <div class="flex justify-between mb-1">
                                <span class="font-medium">Java</span>
                                <span>60%</span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-2.5">
                                <div class="bg-gradient-to-r from-primary to-secondary h-2.5 rounded-full" style="width: 60%"></div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div>
                    <h3 class="text-xl font-bold mb-6 flex items-center">
                        <i class="fa-solid fa-cubes text-primary mr-3"></i> 技术栈
                    </h3>
                    <div class="space-y-4">
                        <div>
                            <div class="flex justify-between mb-1">
                                <span class="font-medium">Web开发</span>
                                <span>85%</span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-2.5">
                                <div class="bg-gradient-to-r from-primary to-secondary h-2.5 rounded-full" style="width: 85%"></div>
                            </div>
                        </div>
                        <div>
                            <div class="flex justify-between mb-1">
                                <span class="font-medium">API开发</span>
                                <span>90%</span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-2.5">
                                <div class="bg-gradient-to-r from-primary to-secondary h-2.5 rounded-full" style="width: 90%"></div>
                            </div>
                        </div>
                        <div>
                            <div class="flex justify-between mb-1">
                                <span class="font-medium">数据库</span>
                                <span>80%</span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-2.5">
                                <div class="bg-gradient-to-r from-primary to-secondary h-2.5 rounded-full" style="width: 80%"></div>
                            </div>
                        </div>
                        <div>
                            <div class="flex justify-between mb-1">
                                <span class="font-medium">DevOps</span>
                                <span>70%</span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-2.5">
                                <div class="bg-gradient-to-r from-primary to-secondary h-2.5 rounded-full" style="width: 70%"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="mt-16 text-center">
                <h3 class="text-xl font-bold mb-6">我使用的工具</h3>
                <div class="flex flex-wrap justify-center gap-6">
                    <div class="bg-white p-4 rounded-xl shadow-md hover:shadow-lg transition-shadow">
                        <i class="fa-brands fa-github text-3xl text-gray-700"></i>
                        <p class="mt-2 text-sm font-medium">GitHub</p>
                    </div>
                    <div class="bg-white p-4 rounded-xl shadow-md hover:shadow-lg transition-shadow">
                        <i class="fa-brands fa-visual-studio-code text-3xl text-blue-500"></i>
                        <p class="mt-2 text-sm font-medium">VS Code</p>
                    </div>
                    <div class="bg-white p-4 rounded-xl shadow-md hover:shadow-lg transition-shadow">
                        <i class="fa-brands fa-docker text-3xl text-cyan-500"></i>
                        <p class="mt-2 text-sm font-medium">Docker</p>
                    </div>
                    <div class="bg-white p-4 rounded-xl shadow-md hover:shadow-lg transition-shadow">
                        <i class="fa-brands fa-jenkins text-3xl text-purple-500"></i>
                        <p class="mt-2 text-sm font-medium">Jenkins</p>
                    </div>
                    <div class="bg-white p-4 rounded-xl shadow-md hover:shadow-lg transition-shadow">
                        <i class="fa-solid fa-database text-3xl text-orange-500"></i>
                        <p class="mt-2 text-sm font-medium">MySQL</p>
                    </div>
                    <div class="bg-white p-4 rounded-xl shadow-md hover:shadow-lg transition-shadow">
                        <i class="fa-brands fa-figma text-3xl text-pink-500"></i>
                        <p class="mt-2 text-sm font-medium">Figma</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 关于我 -->
    <section id="about" class="py-20 bg-white">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16">
                <h2 class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold mb-4">关于我</h2>
                <p class="text-gray-600 max-w-2xl mx-auto">一枚热爱技术的程序猿，致力于通过代码创造价值。</p>
            </div>
            
            <div class="flex flex-col md:flex-row items-center gap-12">
                <div class="md:w-1/3">
                    <div class="relative">
                        <div class="w-64 h-64 md:w-80 md:h-80 rounded-full bg-gradient-to-br from-primary/30 to-accent/30 animate-pulse-slow"></div>
                        <div class="absolute inset-0 flex items-center justify-center">
                            <img src="https://picsum.photos/400/400?random=4" alt="仓鼠" class="w-56 h-56 md:w-72 md:h-72 rounded-full object-cover border-4 border-white shadow-xl">
                        </div>
                    </div>
                </div>
                
                <div class="md:w-2/3">
                    <div class="prose max-w-none">
                        <p class="mb-4">你好！我是仓鼠，一名全栈开发者，目前专注于Web和移动应用开发。</p>
                        <p class="mb-4">这个网站记录了我的软件学习生涯的学习历程和作品，展示了我在技术道路上的探索与成长。</p>
                        <p class="mb-6">我相信技术的力量可以改变世界，通过代码可以创造无限可能。我热衷于学习新的技术，解决复杂的问题，并将想法转化为实际的产品。</p>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-8">
                            <div class="bg-gray-50 p-6 rounded-xl">
                                <h3 class="text-lg font-bold mb-3 flex items-center">
                                    <i class="fa-solid fa-graduation-cap text-primary mr-2"></i> 教育背景
                                </h3>
                                <p class="text-gray-600">计算机科学与技术专业</p>
                                <p class="text-gray-600">本科 | 某知名大学</p>
                            </div>
                            
                            <div class="bg-gray-50 p-6 rounded-xl">
                                <h3 class="text-lg font-bold mb-3 flex items-center">
                                    <i class="fa-solid fa-heart text-primary mr-2"></i> 兴趣爱好
                                </h3>
                                <ul class="text-gray-600 space-y-1">
                                    <li>编程与技术探索</li>
                                    <li>阅读与写作</li>
                                    <li>游戏开发</li>
                                    <li>户外运动</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 联系我 -->
    <section id="contact" class="py-20 bg-gradient-to-br from-indigo-50 via-purple-50 to-pink-50">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16">
                <h2 class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold mb-4">联系我</h2>
                <p class="text-gray-600 max-w-2xl mx-auto">如果你对我的项目感兴趣，或者有任何问题和建议，欢迎随时联系我。</p>
            </div>
            
            <div class="max-w-3xl mx-auto bg-white rounded-2xl shadow-xl overflow-hidden">
                <div class="grid grid-cols-1 md:grid-cols-2">
                    <div class="bg-gradient-to-br from-primary to-secondary p-8 text-white">
                        <h3 class="text-2xl font-bold mb-6">联系方式</h3>
                        <div class="space-y-6">
                            <div class="flex items-start">
                                <div class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center mr-4">
                                    <i class="fa-solid fa-envelope text-white"></i>
                                </div>
                                <div>
                                    <h4 class="font-medium mb-1">邮箱</h4>
                                    <p>hamster@yzycoc.com</p>
                                </div>
                            </div>
                            <div class="flex items-start">
                                <div class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center mr-4">
                                    <i class="fa-solid fa-globe text-white"></i>
                                </div>
                                <div>
                                    <h4 class="font-medium mb-1">网站</h4>
                                    <p>https://yzycoc.com</p>
                                </div>
                            </div>
                            <div class="flex items-start">
                                <div class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center mr-4">
                                    <i class="fa-brands fa-github text-white"></i>
                                </div>
                                <div>
                                    <h4 class="font-medium mb-1">GitHub</h4>
                                    <p>github.com/hamster-dev</p>
                                </div>
                            </div>
                        </div>
                        
                        <div class="mt-10">
                            <h4 class="font-medium mb-4">关注我</h4>
                            <div class="flex space-x-4">
                                <a href="#" class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center hover:bg-white/30 transition-colors">
                                    <i class="fa-brands fa-github text-white"></i>
                                </a>
                                <a href="#" class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center hover:bg-white/30 transition-colors">
                                    <i class="fa-brands fa-twitter text-white"></i>
                                </a>
                                <a href="#" class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center hover:bg-white/30 transition-colors">
                                    <i class="fa-brands fa-linkedin text-white"></i>
                                </a>
                                <a href="#" class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center hover:bg-white/30 transition-colors">
                                    <i class="fa-brands fa-instagram text-white"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                    
                    <div class="p-8">
                        <h3 class="text-2xl font-bold mb-6 text-gray-800">发送消息</h3>
                        <form id="contact-form">
                            <div class="mb-4">
                                <label for="name" class="block text-sm font-medium text-gray-700 mb-1">姓名</label>
                                <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors" placeholder="请输入您的姓名">
                            </div>
                            <div class="mb-4">
                                <label for="email" class="block text-sm font-medium text-gray-700 mb-1">邮箱</label>
                                <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors" placeholder="请输入您的邮箱">
                            </div>
                            <div class="mb-6">
                                <label for="message" class="block text-sm font-medium text-gray-700 mb-1">消息</label>
                                <textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-colors" placeholder="请输入您的消息"></textarea>
                            </div>
                            <button type="submit" class="w-full px-6 py-3 bg-gradient-to-r from-primary to-secondary text-white rounded-lg font-medium hover:shadow-lg transition-all transform hover:-translate-y-1">
                                发送消息
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="bg-dark text-white py-12">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div>
                    <a href="#" class="flex items-center space-x-2 mb-4">
                        <div class="w-10 h-10 rounded-full bg-gradient-to-r from-primary to-secondary flex items-center justify-center">
                            <i class="fa-solid fa-hamster text-white text-xl"></i>
                        </div>
                        <span class="text-xl font-bold">仓鼠の官网</span>
                    </a>
                    <p class="text-gray-400 mb-4">一枚程序猿的技术空间，记录学习历程与项目经验。</p>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fa-brands fa-github"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fa-brands fa-twitter"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fa-brands fa-linkedin"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fa-brands fa-instagram"></i>
                        </a>
                    </div>
                </div>
                
                <div>
                    <h3 class="text-lg font-bold mb-4">快速链接</h3>
                    <ul class="space-y-2">
                        <li><a href="#home" class="text-gray-400 hover:text-white transition-colors">首页</a></li>
                        <li><a href="#projects" class="text-gray-400 hover:text-white transition-colors">项目</a></li>
                        <li><a href="#skills" class="text-gray-400 hover:text-white transition-colors">技能</a></li>
                        <li><a href="#about" class="text-gray-400 hover:text-white transition-colors">关于我</a></li>
                        <li><a href="#contact" class="text-gray-400 hover:text-white transition-colors">联系方式</a></li>
                    </ul>
                </div>
                
                <div>
                    <h3 class="text-lg font-bold mb-4">项目链接</h3>
                    <ul class="space-y-2">
                        <li><a href="https://yzycoc.com/qq" target="_blank" class="text-gray-400 hover:text-white transition-colors">部落仓鼠工具</a></li>
                        <li><a href="https://yzycoc.com/blog" target="_blank" class="text-gray-400 hover:text-white transition-colors">仓鼠的博客</a></li>
                        <li><a href="javascript:void(0)" id="footer-api-link" class="text-gray-400 hover:text-white transition-colors">仓鼠API服务</a></li>
                    </ul>
                </div>
            </div>
            
            <div class="border-t border-gray-800 mt-10 pt-6 flex flex-col md:flex-row justify-between items-center">
                <p class="text-gray-400 text-sm">© 2025 仓鼠の官网. 保留所有权利.</p>
                <div class="flex space-x-6 mt-4 md:mt-0">
                    <a href="#" class="text-gray-400 hover:text-white text-sm transition-colors">隐私政策</a>
                    <a href="#" class="text-gray-400 hover:text-white text-sm transition-colors">服务条款</a>
                    <a href="#" class="text-gray-400 hover:text-white text-sm transition-colors">Cookie政策</a>
                </div>
            </div>
        </div>
    </footer>

    <!-- API服务模态框 -->
    <div id="api-modal" class="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-2xl shadow-2xl max-w-md w-full mx-4 overflow-hidden transform transition-all duration-300 scale-95 opacity-0" id="modal-content">
            <div class="p-6">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="text-xl font-bold">仓鼠API服务</h3>
                    <button id="close-modal" class="text-gray-400 hover:text-gray-600">
                        <i class="fa-solid fa-xmark"></i>
                    </button>
                </div>
                <p class="text-gray-600 mb-6">感谢您对仓鼠API服务的关注！目前该服务暂未开放分享，我们正在进行最后的优化和测试工作。</p>
                <p class="text-gray-600 mb-6">如果您有合作意向或需要API服务，请通过以下方式联系我们，我们将在服务开放后第一时间通知您。</p>
                <div class="flex items-center justify-center space-x-4">
                    <a href="mailto:yzycoc@163.com" class="px-6 py-2 bg-primary text-white rounded-lg font-medium hover:bg-primary/90 transition-colors">
                        发送邮件
                    </a>
                    <button id="close-modal-btn" class="px-6 py-2 bg-gray-200 text-gray-800 rounded-lg font-medium hover:bg-gray-300 transition-colors">
                        稍后再说
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 导航栏滚动效果
        const navbar = document.getElementById('navbar');
        window.addEventListener('scroll', () => {
            if (window.scrollY > 10) {
                navbar.classList.add('py-2', 'shadow-md');
                navbar.classList.remove('py-3', 'shadow-sm');
            } else {
                navbar.classList.add('py-3', 'shadow-sm');
                navbar.classList.remove('py-2', 'shadow-md');
            }
        });
        
        // 移动端菜单
        const menuToggle = document.getElementById('menu-toggle');
        const mobileMenu = document.getElementById('mobile-menu');
        
        menuToggle.addEventListener('click', () => {
            mobileMenu.classList.toggle('hidden');
        });
        
        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                
                const targetId = this.getAttribute('href');
                const targetElement = document.querySelector(targetId);
                
                if (targetElement) {
                    window.scrollTo({
                        top: targetElement.offsetTop - 80,
                        behavior: 'smooth'
                    });
                    
                    // 关闭移动端菜单
                    if (!mobileMenu.classList.contains('hidden')) {
                        mobileMenu.classList.add('hidden');
                    }
                }
            });
        });
        
        // API服务模态框
        const apiModalBtn = document.getElementById('api-modal-btn');
        const footerApiLink = document.getElementById('footer-api-link');
        const apiModal = document.getElementById('api-modal');
        const modalContent = document.getElementById('modal-content');
        const closeModal = document.getElementById('close-modal');
        const closeModalBtn = document.getElementById('close-modal-btn');
        
        function openModal() {
            apiModal.classList.remove('hidden');
            setTimeout(() => {
                modalContent.classList.remove('scale-95', 'opacity-0');
                modalContent.classList.add('scale-100', 'opacity-100');
            }, 10);
        }
        
        function closeModalFunc() {
            modalContent.classList.remove('scale-100', 'opacity-100');
            modalContent.classList.add('scale-95', 'opacity-0');
            setTimeout(() => {
                apiModal.classList.add('hidden');
            }, 300);
        }
        
        apiModalBtn.addEventListener('click', openModal);
        footerApiLink.addEventListener('click', openModal);
        closeModal.addEventListener('click', closeModalFunc);
        closeModalBtn.addEventListener('click', closeModalFunc);
        
        // 点击模态框外部关闭
        apiModal.addEventListener('click', (e) => {
            if (e.target === apiModal) {
                closeModalFunc();
            }
        });
        
        // 联系表单提交
        const contactForm = document.getElementById('contact-form');
        contactForm.addEventListener('submit', (e) => {
            e.preventDefault();
            
            // 模拟表单提交
            const submitBtn = contactForm.querySelector('button[type="submit"]');
            const originalText = submitBtn.innerHTML;
            
            submitBtn.disabled = true;
            submitBtn.innerHTML = '<i class="fa-solid fa-spinner fa-spin mr-2"></i> 发送中...';
            
            setTimeout(() => {
                alert('感谢您的留言！我会尽快回复您。');
                contactForm.reset();
                submitBtn.disabled = false;
                submitBtn.innerHTML = originalText;
            }, 1500);
        });
        
        // 图片懒加载
        document.addEventListener('DOMContentLoaded', () => {
            const lazyImages = document.querySelectorAll('img');
            
            if ('IntersectionObserver' in window) {
                const imageObserver = new IntersectionObserver((entries, observer) => {
                    entries.forEach(entry => {
                        if (entry.isIntersecting) {
                            const image = entry.target;
                            image.classList.add('opacity-100');
                            image.classList.remove('opacity-0');
                            imageObserver.unobserve(image);
                        }
                    });
                });
                
                lazyImages.forEach(image => {
                    imageObserver.observe(image);
                });
            }
        });
    </script>
</body>
</html>
    